<!DOCTYPE html>
<html ng-app="rzSliderDemo">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS Touch Slider</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="./lib/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/rzslider.css"/>
  <link rel="stylesheet" href="demo.css"/>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
</head>

<body ng-controller="MainCtrl">

<div class="wrapper">
  <header>
    <h1>AngularJS Touch Slider</h1>
  </header>

  <article>
    <h2>Simple slider</h2>
    Model: <input type="number" ng-model="minSlider.value"/><br/>
    <rzslider rz-slider-model="minSlider.value"></rzslider>
  </article>

  <article>
    <h2>Range slider</h2>
    Min Value: <input type="number" ng-model="rangeSlider.minValue"/><br/>
    Max Value: <input type="number" ng-model="rangeSlider.maxValue"/><br/>
    <rzslider
      data-rz-slider-model="rangeSlider.minValue"
      data-rz-slider-high="rangeSlider.maxValue"
      data-rz-slider-options="rangeSlider.options"
    ></rzslider>
  </article>

  <article>
    <h2>Range slider with min limit set to 10 and max limit set to 90 </h2>
    <rzslider
      rz-slider-model="minMaxLimitSlider.value"
      rz-slider-options="minMaxLimitSlider.options"
    ></rzslider>
  </article>

  <article>
    <h2>Range slider with minimum range of 10 and maximum of 50</h2>
    <rzslider
      rz-slider-model="minMaxRangeSlider.minValue"
      rz-slider-high="minMaxRangeSlider.maxValue"
      rz-slider-options="minMaxRangeSlider.options"
    ></rzslider>
  </article>

  <article>
    <h2>Range slider with noSwitching=true</h2>
    <rzslider
      rz-slider-model="noSwitchingSlider.minValue"
      rz-slider-high="noSwitchingSlider.maxValue"
      rz-slider-options="noSwitchingSlider.options"
    ></rzslider>
  </article>

  <article>
    <h2>Range slider with minimum range of 10 and pushRange option</h2>
    <rzslider
      rz-slider-model="minPushRangeSlider.minValue"
      rz-slider-high="minPushRangeSlider.maxValue"
      rz-slider-options="minPushRangeSlider.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with visible selection bar</h2>
    <rzslider
      rz-slider-model="slider_visible_bar.value"
      rz-slider-options="slider_visible_bar.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with visible selection bar at the end</h2>
    <rzslider
      rz-slider-model="slider_visible_bar_end.value"
      rz-slider-options="slider_visible_bar_end.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with visible selection bar from a value</h2>
    <rzslider
      rz-slider-model="slider_visible_bar_from_value.value"
      rz-slider-options="slider_visible_bar_from_value.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with dynamic selection bar colors</h2>
    <rzslider
      rz-slider-model="color_slider_bar.value"
      rz-slider-options="color_slider_bar.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with dynamic pointer color</h2>
    <rzslider
      rz-slider-model="color_slider_pointer.value"
      rz-slider-options="color_slider_pointer.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with dynamic tick color</h2>
    <rzslider
      rz-slider-model="slider_tick_color.value"
      rz-slider-options="slider_tick_color.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with custom floor/ceil/step</h2>
    <rzslider
      rz-slider-model="slider_floor_ceil.value"
      rz-slider-options="slider_floor_ceil.options"
    ></rzslider>
  </article>

  <article>
    <h2>Right to left slider with custom floor/ceil/step</h2>
    <rzslider
      rz-slider-model="slider_floor_ceil_rtl.value"
      rz-slider-options="slider_floor_ceil_rtl.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with callbacks on start, change and end</h2>
    <p>Value linked on start: {{ otherData.start }}</p>
    <p>Value linked on change: {{ otherData.change }}</p>
    <p>Value linked on end: {{ otherData.end }}</p>

    <rzslider
      rz-slider-model="slider_callbacks.value"
      rz-slider-options="slider_callbacks.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with custom display function</h2>
    <rzslider
      rz-slider-model="slider_translate.minValue"
      rz-slider-high="slider_translate.maxValue"
      rz-slider-options="slider_translate.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with custom display function using html formatting</h2>
    <rzslider
      rz-slider-model="slider_translate_html.minValue"
      rz-slider-high="slider_translate_html.maxValue"
      rz-slider-options="slider_translate_html.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with angular directive inside custom template</h2>
    <rzslider
            rz-slider-model="slider_custom_directive_inside_template.minValue"
            rz-slider-high="slider_custom_directive_inside_template.maxValue"
            rz-slider-options="slider_custom_directive_inside_template.options"
            rz-slider-tpl-url="directiveInCustomTemplate.html"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with Alphabet</h2>
    Current letter: {{ slider_alphabet.value }}
    <rzslider
      rz-slider-model="slider_alphabet.value"
      rz-slider-options="slider_alphabet.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with ticks</h2>
    <rzslider
      rz-slider-model="slider_ticks.value"
      rz-slider-options="slider_ticks.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with ticks and tooltips</h2>
    <rzslider
      rz-slider-model="slider_ticks_tooltip.value"
      rz-slider-options="slider_ticks_tooltip.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with ticks and values (and tooltips)</h2>
    <rzslider
      rz-slider-model="slider_ticks_values.value"
      rz-slider-options="slider_ticks_values.options"
    ></rzslider>
  </article>

  <article>
    <h2>Range slider with ticks and values</h2>
    <rzslider
      rz-slider-model="range_slider_ticks_values.minValue"
      rz-slider-high="range_slider_ticks_values.maxValue"
      rz-slider-options="range_slider_ticks_values.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with ticks at intermediate positions</h2>
    <rzslider
      rz-slider-model="slider_ticks_at.value"
      rz-slider-options="slider_ticks_at.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with ticks and values at intermediate positions</h2>
    <rzslider
      rz-slider-model="slider_ticks_values_at.value"
      rz-slider-options="slider_ticks_values_at.options"
    ></rzslider>
    <br><br>
  </article>

  <article>
    <h2>Slider with ticks values and legend</h2>
    <rzslider class="with-legend"
      rz-slider-model="slider_ticks_legend.value"
      rz-slider-options="slider_ticks_legend.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with draggable range</h2>
    <rzslider
      rz-slider-model="slider_draggable_range.minValue"
      rz-slider-high="slider_draggable_range.maxValue"
      rz-slider-options="slider_draggable_range.options"
    ></rzslider>
  </article>

  <article>
    <h2>Slider with draggable range only</h2>
    <rzslider
      rz-slider-model="slider_draggable_range_only.minValue"
      rz-slider-high="slider_draggable_range_only.maxValue"
      rz-slider-options="slider_draggable_range_only.options"
    ></rzslider>
  </article>

  <article>
    <h2>Vertical sliders</h2>
    <div class="row vertical-sliders" style="margin: 20px;">
      <div class="col-md-2">
        <rzslider rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options"></rzslider>
      </div>
      <div class="col-md-2">
        <rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
                  rz-slider-options="verticalSlider2.options"></rzslider>
      </div>
      <div class="col-md-2">
        <rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options"></rzslider>
      </div>
      <div class="col-md-2">
        <rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
                  rz-slider-options="verticalSlider4.options"></rzslider>
      </div>
      <div class="col-md-2">
        <rzslider rz-slider-model="verticalSlider5.value" rz-slider-options="verticalSlider5.options"></rzslider>
      </div>
      <div class="col-md-2">
        <rzslider rz-slider-model="verticalSlider6.value" rz-slider-options="verticalSlider6.options"></rzslider>
      </div>
    </div>
  </article>

  <article>
    <h2>Disabled slider</h2>
    <label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label>
    <rzslider
      rz-slider-model="disabled_slider.value"
      rz-slider-options="disabled_slider.options"
    ></rzslider>
  </article>

  <article>
    <h2>Read-only slider</h2>
    <label>Read-only <input type="checkbox" ng-model="read_only_slider.options.readOnly"></label>
    <rzslider
      rz-slider-model="read_only_slider.value"
      rz-slider-options="read_only_slider.options"
    ></rzslider>
  </article>

  <article>
    <h2>Toggle slider example</h2>
    <button ng-click="toggle()">{{ visible ? 'Hide' : 'Show' }}</button>
    <br/>
    <div ng-show="visible">
      <rzslider
        rz-slider-model="slider_toggle.value"
        rz-slider-options="slider_toggle.options"></rzslider>
    </div>
  </article>

  <article>
    <h2>Sliders inside a modal</h2>
    Normal slider value: {{percentages.normal.low}}%
    </br>
    Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
    </br>
    <button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
  </article>

  <article>
    <h2>Sliders inside tabs</h2>
    <p>Price 1: {{tabSliders.slider1.value}}</p>
    <p>Price 2: {{tabSliders.slider2.value}}</p>
    <tabset>
      <tab heading="Slider 1" select="refreshSlider()">
        <rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
      </tab>
      <tab heading="Slider 2" select="refreshSlider()">
        <rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
      </tab>
    </tabset>
  </article>

  <article>
    <h2>Slider with all options demo</h2>
    <div class="row all-options">
      <div class="col-md-4">
        <label class="field-title">Min Value: </label><input type="number" ng-model="slider_all_options.minValue"/><br/>
        <label class="field-title"><input type="checkbox" ng-click="toggleHighValue()"> Max Value: </label>
        <input type="number" ng-model="slider_all_options.maxValue" ng-disabled="slider_all_options.maxValue == null"/><br/>
        <label class="field-title">Floor: </label><input type="number" ng-model="slider_all_options.options.floor"/><br/>
        <label class="field-title">Ceil: </label><input type="number" ng-model="slider_all_options.options.ceil"/><br/>
      </div>
      <div class="col-md-4">
        <label class="field-title">Step: </label><input type="number" ng-model="slider_all_options.options.step"/><br/>
        <label class="field-title">Precision: </label><input type="number" ng-model="slider_all_options.options.precision"/><br/>
        <label>Hide limits <input type="checkbox" ng-model="slider_all_options.options.hideLimitLabels"></label><br/>
        <label>Draggable range <input type="checkbox" ng-model="slider_all_options.options.draggableRange"></label>
      </div>
      <div class="col-md-4">
        <label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/>
        <label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/>
        <label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
        <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label><br />
        <label>Right to Left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label>
      </div>
    </div>
    <rzslider
      rz-slider-model="slider_all_options.minValue"
      rz-slider-high="slider_all_options.maxValue"
      rz-slider-options="slider_all_options.options"
    ></rzslider>
  </article>
</div>

</body>
<script src="../node_modules/angular/angular.js"></script>
<script src="./lib/ui-bootstrap-tpls.js"></script>
<script src="../dist/rzslider.js"></script>
<script src="demo.js"></script>
</html>
